<template>
  <view :class="$style.open_live">
    <view :class="$style.open_live_top">
      <view :class="$style.open_live_top_title">{{ message }}</view>
    </view>
    <view :class="$style.open_live__main">
      <image :class="$style.open_live__main_zbImg" :src="cytxImg"></image>
      <!-- <scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll" :scroll-left="scrollLeft" enable-flex>
        <block v-for="(item, index) in mediaInfo" :key="index" @click="previewLocaleMedia">
          <image id="image{{index}}" :src="item.dmtDz" mode="scaleToFill" class="scroll_image"
            v-show="item.dmtLx == 0" />
        </block>
      </scroll-view> -->
    </view>
    <view :class="$style.open_live__footer">
      <view :class="$style.open_live__footer_group">
        <image :class="$style.open_live__footer_img" :src="hangupImg"></image>
        <view :class="$style.open_live__footer_gd">挂断</view>
      </view>

      <image :class="$style.open_live__footer_qhjtImg" :src="shotCutImg"></image>
    </view>

    <view class="uni-margin-wrap">
      <swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" display-multiple-items="5">
        <swiper-item v-for="(item, index) in personnelList" :key="index">
          <view class="swiper-item uni-bg-red">
            <view class="swiper-xm">{{ item.xm }}</view>
            <image class="image" :src="wqImg"></image>
          </view>
        </swiper-item>
      </swiper>
    </view>
  </view>
</template>

<script setup lang='ts'>
import hangupImg from '@/static/images/chat/hangup.png'
import shotCutImg from '@/static/images/chat/shot_cut.png'

import cytxImg from '@/static/images/chat/cytx.png'
import wqImg from '@/static/images/chat/wq.png'
import { ref } from 'vue';
/**
 * 观看发起直播页面
 */

const message = ref<any>('由王强发起的直播')

const indicatorDots = false
const autoplay = false
const interval = 2000
const duration = 500

const personnelList = ref<any>([
  {
    id: 1,
    xm: '王强',
    Img: wqImg
  },
  {
    id: 2,
    xm: '王强',
    Img: wqImg
  },
  {
    id: 3,
    xm: '王强',
    Img: wqImg
  },
  {
    id: 4,
    xm: '王强',
    Img: wqImg
  },
  {
    id: 5,
    xm: '王强',
    Img: wqImg
  },
  {
    id: 6,
    xm: '王强',
    Img: wqImg
  },
  {
    id: 7,
    xm: '王强',
    Img: wqImg
  },
])
</script>

<style lang='less' module>
.open_live {
  background: #000;
  width: 100vw;
  height: 100vh;
  padding: 153rpx 0 0 0;
  box-sizing: border-box;

  .open_live_top {
    padding: 20rpx;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;

    .open_live_top_title {
      font-size: 36rpx;
      font-family: Microsoft YaHei;
      font-weight: bold;
      color: #FFFFFF;
      width: 100vw;
      text-align: center;
    }
  }

  .open_live__main {
    padding: 50rpx 0 0 0;
    box-sizing: border-box;
    position: relative;

    .open_live__main_zbImg {
      width: 100vw;
      height: calc(100vh - 600rpx);
    }
  }

  .open_live__footer {
    text-align: center;
    position: relative;

    .open_live__footer_group {
      margin-top: 70rpx;

      .open_live__footer_img {
        width: 120rpx;
        height: 120rpx;
      }

      .open_live__footer_gd {
        font-size: 30rpx;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #FF5860;
        width: 100vw;
        text-align: center;
      }

    }

    .open_live__footer_qhjtImg {
      position: absolute;
      right: 77rpx;
      top: 40rpx;
      width: 80rpx;
      height: 80rpx;
    }
  }
}
</style>

<style scoped>
.scroll-view_H {
  white-space: nowrap;
  width: calc(100% - 65rpx);
  margin-left: 20rpx;
}

.scroll-view-item {
  height: 300rpx;
  line-height: 300rpx;
  text-align: center;
  font-size: 36rpx;
}

.scroll-view-item_H {
  display: inline-block;
  width: 100%;
  height: 300rpx;
  line-height: 300rpx;
  text-align: center;
  font-size: 36rpx;
}

.scroll_image {
  width: 180rpx;
  height: 120rpx;
  margin-right: 21rpx;
}

.operate_image {
  width: 15rpx;
}

.uni-margin-wrap {
  width: 100vw;
  height: 180rpx;
  position: absolute;
  bottom: 252rpx;
}

.swiper-item {
  display: block;
  height: 180rpx;
  /* width: 20%; */
  line-height: 180rpx;
  text-align: center;
  position: relative;
}

.swiper-xm {
  position: absolute;
  top: -70rpx;
  left: 20rpx;
  font-size: 22rpx;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #FFFFFF;
}

.swiper-item_group {
  /* width: 20%; */
  height: 100%;
}

.image {
  width: 130rpx;
  height: 168rpx;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 20rpx;
}
</style>
